<template>
  <div class="blog-page" @keydown="handleKeydown" tabindex="0" ref="pageRef">
    <!-- 彩蛋提示 -->
    <EasterEggHint :show="showEasterEgg" />

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <SearchInput v-model="searchQuery" placeholder="搜索脚本文件..." @search="handleSearch" />
      </div>
    </div>

    <!-- 脚本展示 -->
    <div class="scripts-container">
      <div class="scripts-grid">
        <TerminalCard v-for="script in paginatedScripts" :key="script.id" :script="script" @click="viewScript" />
      </div>

      <!-- 空状态 -->
      <a-empty v-if="paginatedScripts.length === 0" :image="simpleImage" description="暂无相关脚本" class="custom-empty-dark" />
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <Pagination
        v-model:current="currentPage"
        hideOnSinglePage
        :total="totalScripts"
        :page-size="pageSize"
        :show-size-changer="false"
        :show-quick-jumper="false"
        :show-less-items="true"
        :show-total="(total, range) => `第 ${range[0]}-${range[1]} 个，共 ${total} 个脚本`"
        class="custom-pagination"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, nextTick } from 'vue';
  import { Pagination, Empty } from 'ant-design-vue';
  import TerminalCard from '../components/TerminalCard.vue';
  import SearchInput from '../components/SearchInput.vue';
  import EasterEggHint from '../components/EasterEggHint.vue';
  import { useBlogScripts } from './index';

  defineOptions({
    name: 'BlogScriptsPage',
  });

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  const { pageRef, showEasterEgg, searchQuery, currentPage, pageSize, paginatedScripts, totalScripts, handleKeydown, handleSearch, viewScript, handlePageChange } = useBlogScripts();

  // 初始化
  onMounted(() => {
    // 设置页面焦点，确保键盘事件能够正确触发
    nextTick(() => {
      if (pageRef.value) {
        pageRef.value.focus();
      }
    });
  });
</script>

<style scoped lang="scss">
  @use '../css/blog.scss' as *;

  /* 脚本展示 */
  .scripts-container {
    margin-bottom: 3rem;
  }

  .scripts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 空状态适配暗色背景 */
  .custom-empty-dark {
    ::v-deep .ant-empty-description {
      color: #bfc9d1 !important;
      font-size: 1.08rem;
      font-weight: 500;
      letter-spacing: 0.2px;
    }
    ::v-deep .ant-empty-image {
      filter: brightness(0.7) grayscale(0.2);
      opacity: 0.85;
    }
  }

  /* 响应式设计 */
  @media (max-width: 1024px) {
    .scripts-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.2rem;
      padding: 0 1rem;
    }
  }

  @media (max-width: 768px) {
    .scripts-grid {
      grid-template-columns: 1fr;
      gap: 1.2rem;
      padding: 0 1rem;
    }
  }
</style> 